<style lang="less">
    @import '../../../styles/common.less';

    .ivu-page-options-sizer {
        width: 100px;
    }
</style>

<template>
    <Row>
        <Card>
            <p slot="title">实时日志</p>
            <Row>
                <Col span="4">
                    项目名称：
                    <Select v-model="searchData.projectId" @on-change="projectOnChange"
                            style="width:60%">
                        <Option v-for="(item,index) in choiceData" :value="item.id" :key="index">{{ item.name }}</Option>
                    </Select>
                </Col>
                <Col span="4">
                    匹配过滤条件：
                    <Input v-model="searchData.keyWords" placeholder="请输入匹配过滤条件" style="width: 50%"></Input>
                </Col>
                <Col span="4" v-if="logBtnShow">
                    <Button type="primary" :loading="loading1" @click="buttonOnClick">查看日志</Button>
                    <Button type="primary" @click="() => {this.logData = [];this.logData_origin = []}">清空日志</Button>
                </Col>

                <Col span="2" v-if="logStopBtnShow">
                    <Button type="error" :loading="loading2" @click="stopViewLog">停止查看</Button>
                </Col>
                <Col span="4">
                    最多显示条数：
                    <Select @on-change="maxLengthChange" v-model="searchData.maxLength" style="width: 100px">
                        <Option  value="500" :key="1">500行</Option>
                        <Option  value="1000" :key="2">1000行</Option>
                        <Option  value="5000" :key="3">5000行</Option>
                        <Option  value="10000" :key="4">10000行</Option>
                    </Select>
                </Col>
            </Row>
            <Row id="content" class="margin-top-10" style="height: 70vh;padding: 20px;padding-left: 10px;background-color: #3c3f41;font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;font-size: 16px;color: #fff;overflow-x: hidden;overflow-y: scroll;">
                <Col span="24" v-for="(item, index) in logData">
                    <Col span="1">{{item.lineNum}}</Col>
                    <Col span="23">{{item.data}}</Col>
                </Col>
            </Row>
        </Card>
    </Row>
</template>

<script>
    import util from '../../../libs/util';
    import qs from 'qs';

    export default {
        name: 'editable-table',
        data () {
            return {
                choiceData: [], // 项目选择框是数据
                searchData: { // 筛选条件
                    projectId: null,
                    keyWords: '',
                    maxLength: '1000'
                },
                timer: null, // 定时器
                logBtnShow: true, // 当前显示 查看日志 的按钮还是 停止查看 的按钮
                logStopBtnShow: false, // 当前显示 查看日志 的按钮还是 停止查看 的按钮
                loading1: false, // 按钮loading
                loading2: false, // 按钮loading
                lineNum: 0, // 获取条数的下标
                length: 1000, // 页面最多显示几行数据
                logData_origin: [], // 接口显示的原始数据
                logData: [] // 最新的1000条数据
            };
        },
        methods: {
            // 过滤只显示最新xxx行数据
            filter () {
                let length = this.length;
                if (this.logData_origin.length >= length) {
                    let index = this.logData_origin.length - length;
                    this.logData = this.logData_origin.splice(index, length);
                } else {
                    this.logData = this.logData_origin;
                }
                // 每次渲染滚动到最底部
                this.$nextTick(() => {
                    let container = this.$el.querySelector('#content');
                    container.scrollTop = container.scrollHeight;
                    // console.log(container, container.scrollTop, container.scrollHeight);
                });
            },
            projectOnChange () {
                clearInterval(this.timer);
                setTimeout(() => {
                    this.logData = [];
                    this.logData_origin = [];
                    this.lineNum = 0;
                    this.logBtnShow = true;
                    this.logStopBtnShow = false;
                }, 1000);
            },
            // 页面显示最大条数
            maxLengthChange (e) {
                this.searchData.maxLength = e;
            },
            // 点击查看日志按钮时
            buttonOnClick () {
                this.loading1 = true;
                if (!this.searchData.projectId) {
                    this.$Message.error('请选择项目');
                    this.loading1 = false;
                    return false;
                }
                this.viewLog();
                this.timer = setInterval(() => {
                    this.viewLog();
                }, 1000);
            },
            // 查看日志
            viewLog () {
                let params = {
                    'lineNum': this.lineNum,
                    'filterKeyWorld': this.searchData.keyWords
                };
                util.ajax.get('api/show_api_log/showLog/' + this.searchData.projectId, {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.logBtnShow = false;
                        this.logStopBtnShow = true;
                        this.lineNum = res.data.data.lineNum;
                        this.logData_origin = this.logData_origin.concat(res.data.data.logData);
                        this.filter();
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                    this.loading1 = false;
                });
            },
            // 停止查看日志
            stopViewLog () {
                this.loading2 = true;
                clearInterval(this.timer);
                setTimeout(() => {
                    this.logStopBtnShow = false;
                    this.logBtnShow = true;
                    this.loading2 = false;
                    this.lineNum = 0;
                    console.log(this.logStopBtnShow, this.logBtnShow);
                }, 1000);
            },
            // 初始化选择框数据
            initData () {
                util.ajax.get('api/show_api_log').then(res => {
                    if (res.data.code === 200) {
                        this.choiceData = res.data.data.ret_data;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            }
        },
        created () {
            this.initData();
        }
    };
</script>
